<template>
  <!-- 加载 -->
    <Loading/>
  <!-- 壁纸 -->
    <Background @loadComplete="loadComplete"/>

  <!-- 主界面 -->
    <Transition mode="out-in" name="fade">
        <main v-if="store.imgLoadStatus" id="main">
            <div v-show="!store.backgroundShow" class="container">
                <section v-show="!store.setOpenState" class="all">
                    <MainLeft/>
                    <MainRight v-show="!store.boxOpenState"/>
                    <Box v-show="store.boxOpenState"/>
                </section>
                <section v-show="store.setOpenState" class="more" @click="store.setOpenState = false">
                    <MoreSet/>
                </section>
            </div>

            <!-- 移动端菜单按钮 -->
            <Icon
                    v-show="!store.backgroundShow"
                    class="menu"
                    size="24"
                    @click="store.mobileOpenState = !store.mobileOpenState"
            >
                <component :is="store.mobileOpenState ? CloseSmall  :  HamburgerButton"/>
            </Icon>
            <!-- 页脚 -->
            <Transition mode="out-in" name="fade">
                <Footer v-show="!store.backgroundShow && !store.setOpenState"/>
            </Transition>

        </main>
    </Transition>
</template>
<script setup>
import {checkDays, helloInit} from "@/utils/getTime.js";
import {mainStore} from "@/store";
import {Icon} from "@vicons/utils";
import Loading from "@/components/Loading.vue";
import MainLeft from "@/views/Main/Left.vue";
import MainRight from "@/views/Main/Right.vue";
import Background from "@/components/Background.vue";
import Footer from "@/components/Footer.vue";
import Box from "@/views/Box/index.vue";
import MoreSet from "@/views/MoreSet/index.vue";
import {nextTick, onBeforeUnmount, onMounted, watch} from "vue";
import {CloseSmall, HamburgerButton} from "@icon-park/vue-next";

const store = mainStore();
// 页面宽度
const getWidth = () => {
    store.setInnerWidth(window.innerWidth);
};

// 加载完成事件
const loadComplete = () => {
    nextTick(() => {
        // 欢迎提示
        helloInit();
        // 默哀模式
        checkDays();
    });
};

// 监听宽度变化
watch(
    () => store.innerWidth,
    (value) => {
        if (value < 990) {
            store.boxOpenState = false;
        }
    },
);

onMounted(() => {
    // 自定义鼠标
    // cursorInit();

    // 屏蔽右键
    document.oncontextmenu = () => {
        ElMessage({
            message: "为了浏览体验，本站禁用右键",
            grouping: true,
            duration: 2000,
        });
        return false;
    };

    // 鼠标中键事件
    window.addEventListener("mousedown", (event) => {
        if (event.button === 1) {
            store.backgroundShow = !store.backgroundShow;
            ElMessage({
                message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
                grouping: true,
            });
        }
    });

    // 监听当前页面宽度
    getWidth();
    window.addEventListener("resize", getWidth);

    // 控制台输出
    const styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
    const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
    const styleContent = "color: rgb(30,152,255);";
    const title1 = "Priest的主页";
    const title2 = `
 ________  ________  ___  _______   ________  _________
|\\   __  \\|\\   __  \\|\\  \\|\\  ___ \\ |\\   ____\\|\\___   ___\\
\\ \\  \\|\\  \\ \\  \\|\\  \\ \\  \\ \\   __/|\\ \\  \\___|\\|___ \\  \\_|
 \\ \\   ____\\ \\   _  _\\ \\  \\ \\  \\_|/_\\ \\_____  \\   \\ \\  \\
  \\ \\  \\___|\\ \\  \\\\  \\\\ \\  \\ \\  \\_|\\ \\|____|\\  \\   \\ \\  \\
   \\ \\__\\    \\ \\__\\\\ _\\\\ \\__\\ \\_______\\____\\_\\  \\   \\ \\__\\
    \\|__|     \\|__|\\|__|\\|__|\\|_______|\\_________\\   \\|__|
                                      \\|_________|
`;
    console.info(`%c${title1} %c${title2}`, styleTitle1, styleTitle2, styleContent);
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", getWidth);
});

</script>

<style lang="scss" scoped>
#main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.2);
  transition: transform 0.3s;
  animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.5s;

  .container {
    width: 100%;
    height: 100vh;
    margin: 0 auto;

    .all {
      width: 100%;
      height: 100%;
      padding: 0 0.75rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .more {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #00000080;
      backdrop-filter: blur(20px);
      z-index: 2;
      animation: fade 0.5s;
    }

    @media (max-width: 1200px) {
      padding: 0 2vw;
    }
  }

  .menu {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 84%;
    left: calc(50% - 28px);
    width: 56px;
    height: 34px;
    background: rgb(0 0 0 / 20%);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    transition: transform 0.3s;
    animation: fade 0.5s;

    &:active {
      transform: scale(0.95);
    }

    .i-icon {
      transform: translateY(2px);
    }

    @media (min-width: 721px) {
      display: none;
    }
  }
}
</style>
